<template>
	<!-- <div class="text-center">
		<canvas id="lottie_demo" type="2d" style="display: inline-block;width: 200px; height: 200px;" />
	</div> -->

	<div style="background-color: #f3f5f7">
		<div class="index-content">
			<div class="login-box" :style="{ 'margin-top': _navHeight + 36 + 'rpx' }">
				<div class="logo">
					<img src="../static/image/lgoo.png" alt="" class="logo-img" />
					<div class="logo-title">卡券核销助手</div>
				</div>
				<div class="form">
					<div class="field">
						<div class="label">手机号</div>
						<input type="text" class="custom-input" placeholder="请输入手机号" />
					</div>

					<div class="field" style="margin-top: 48rpx;">
						<div class="label">密码</div>
						<input type="password" class="custom-input" placeholder="请输入密码" />
					</div>
				</div>
				<div class="btn" @click="toLogin">
					立即登录
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import lottie from "lottie-miniprogram";
import success from "./success.json";
let ani = null;
export default {
	data() {
		return {
			inited: false,
			_navHeight: 0,
			navbgColor: "rgba(255, 255, 255, 0)",
		};
	},
	onShow() {
		// this.init();
	},
	onLoad() {
		uni.hideTabBar({
			animation: false,
		});
		let res = wx.getSystemInfoSync();
		let buttonInfo = wx.getMenuButtonBoundingClientRect();
		let navBarHeight = 44 + (buttonInfo.top - res.statusBarHeight) * 2 + buttonInfo.height;
		this._navHeight = (navBarHeight * 750) / wx.getSystemInfoSync().windowWidth;
	},
	onReady() {},
	onHide() {},
	onUnload() {},
	methods: {
		toLogin() {
			uni.reLaunch({
				url: "/pages/index",
			});
		},
		init() {
			if (this.inited) {
				return;
			}
			this.createSelectorQuery()
				.select("#lottie_demo")
				.node((res) => {
					console.log(res); // 节点对应的 Canvas 实例。
					const canvas = res.node;
					const context = canvas.getContext("2d");
					canvas.width = 250;
					canvas.height = 248;
					lottie.setup(canvas);
					ani = lottie.loadAnimation({
						loop: false,
						autoplay: true,
						animationData: success,
						rendererSettings: {
							context,
						},
					});
					this.inited = true;
				})
				.exec();
		},
	},
};
</script>
<style lang="scss" scoped>
.content {
	height: 100vh;
	width: 750rpx;
}
.index-content {
	background-image: url(../static/bg.png);
	// width: 100%;
	overflow: hidden;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 72rpx;
}
.login-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	// align-items: center;
	.logo {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.logo-img {
			width: 180rpx;
			height: 180rpx;
		}
		.logo-title {
			font-size: 40rpx;
			margin-top: 20rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 54.88rpx;
			color: rgba(30, 33, 33, 1);
		}
	}
	.form {
		margin-top: 84rpx;
		width: 100%;
		.field {
			.label {
				/** 文本1 */
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 43.9rpx;
				color: rgba(30, 33, 33, 1);
			}
			.custom-input {
				height: 40rpx;
				opacity: 1;
				border-radius: 44rpx;
				// background: rgba(235, 239, 242, 1);
				background: white;
				padding: 24rpx 32rpx;
				margin-top: 24rpx;
			}
		}
	}
	.btn {
		width: 590rpx;
		height: 88rpx;
		border-radius: 48rpx;
		text-align: center;
		line-height: 88rpx;
		background: rgba(61, 63, 67, 1);
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		color: rgba(255, 255, 255, 1);
		margin-top: 124rpx;
	}
}
</style>
